<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <input type="text" v-model="msg" />
      <input type="text" :value="msg" />
      <br />

      <input type="checkbox" v-model="isAgree" />:我同意此协议
      <h2>用户{{isAgree?'同意':'不同意'}}协议</h2>
      <h1>选择你喜欢的食物</h1>
      <input type="checkbox" value="螺蛳粉1" v-model="likeFood" /> 螺蛳粉
      <input type="checkbox" value="卤煮1" v-model="likeFood" /> 卤煮
      <input type="checkbox" value="豆汁1" v-model="likeFood" /> 豆汁

        <h1>开始你的表演</h1>
        <select v-model="ans">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="F">F</option>
            <option value="C">C</option>
        </select>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            msg: 0,
            isAgree: false,
            likeFood:[],
            ans:''
          };
        },
        methods: {},
      });
    </script>
  </body>
</html>
